<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>Fluenty Survey</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
      }
      body {
        background-color: #fff;
        color: #0f4c81;
        display: flex;
        min-height: 100vh;
        flex-direction: column;
        max-width: 600px;
        margin: 0 auto;
      }
      .container {
        padding: 40px 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        flex: 1;
        justify-content: flex-start;
      }

      /* Header and Navigation */
      .header {
        width: 100%;
        display: flex;
        align-items: center;
        margin-bottom: 40px;
        position: relative;
      }
      .back-button {
        position: absolute;
        left: 0;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: none;
        border: none;
        cursor: pointer;
        color: #555;
      }
      .progress-bar {
        width: 100%;
        height: 8px;
        background-color: #e0e0e0;
        border-radius: 4px;
        overflow: hidden;
        margin-left: 50px;
      }
      .progress-fill {
        height: 100%;
        width: 94%;
        background-color: #4991ef;
        border-radius: 4px;
      }

      /* Content */
      .content {
        width: 100%;
        padding: 20px 0;
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      .title {
        font-size: 32px;
        font-weight: 700;
        color: #0f4c81;
        margin-bottom: 10px;
        text-align: center;
        line-height: 1.3;
        display: flex;
        flex-direction: column;
      }
      .highlight {
        color: #4991ef;
      }
      .subtitle {
        font-size: 18px;
        color: #555;
        margin-bottom: 40px;
        text-align: center;
        line-height: 1.5;
      }

      /* Form */
      .form-container {
        width: 100%;
        margin-bottom: 30px;
      }
      .form-group {
        margin-bottom: 20px;
      }
      .form-label {
        display: block;
        font-size: 18px;
        font-weight: 600;
        color: #333;
        margin-bottom: 12px;
      }
      .google-button {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding: 15px;
        background-color: white;
        border: 1px solid #ddd;
        border-radius: 16px;
        font-size: 16px;
        color: #333;
        cursor: pointer;
        transition: all 0.2s ease;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
      }
      .google-button:hover {
        background-color: #f9f9f9;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      }
      .google-icon {
        margin-right: 10px;
      }

      /* Checkbox */
      .checkbox-group {
        display: flex;
        align-items: flex-start;
        margin-bottom: 16px;
      }
      .checkbox-input {
        width: 22px;
        height: 22px;
        margin-right: 12px;
        margin-top: 2px;
        border: 1px solid #ddd;
        border-radius: 4px;
        appearance: none;
        -webkit-appearance: none;
        cursor: pointer;
      }
      .checkbox-input:checked {
        background-color: #4991ef;
        border-color: #4991ef;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 14px;
      }
      .checkbox-label {
        font-size: 16px;
        color: #555;
        line-height: 1.5;
      }
      .link {
        color: #0f4c81;
        text-decoration: none;
        font-weight: 600;
      }

      /* Stats Box */
      .stats-box {
        width: 100%;
        background-color: #f8f9fa;
        border-radius: 16px;
        padding: 30px 20px;
        margin-top: 20px;
        text-align: center;
      }
      .join-text {
        font-size: 24px;
        font-weight: 600;
        color: #3ba0ff;
        margin-bottom: 30px;
      }
      .awards-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
      }
      .award {
        position: relative;
        width: 90%;
      }
      .award1 {
        position: relative;
        width: 45%;
      }
      .laurel-left,
      .laurel-right {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 60px;
        height: 80px;
        color: #ffc107;
        font-size: 60px;
      }
      .laurel-left {
        left: 0;
      }
      .laurel-right {
        right: 0;
        transform: translateY(-50%) scaleX(-1);
      }
      .rank {
        font-size: 32px;
        font-weight: 700;
        color: #0b4983;
      }
      .rank-category {
        font-size: 18px;
        color: #888;
        margin-top: 6px;
      }
      .stars {
        display: flex;
        justify-content: center;
        gap: 8px;
        margin: -20px 10px 0px 10px;
      }
      .star {
        color: #ffc107;
        font-size: 28px;
      }

      /* Button */
      .continue-button {
        width: 100%;
        padding: 18px;
        background-color: #a5cefb;
        color: white;
        border: none;
        border-radius: 16px;
        font-size: 18px;
        font-weight: 600;
        cursor: pointer;
        margin-top: 30px;
        transition: background-color 0.2s ease;
      }
      .continue-button:hover {
        background-color: #93bef9;
      }

      @media (max-width: 480px) {
        .title {
          font-size: 28px;
        }
        .subtitle {
          font-size: 16px;
        }
        .join-text {
          font-size: 20px;
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
      <!-- Header with back button and progress bar -->
      <div class="header">
        <button class="back-button">
          <span class="material-icons">arrow_back</span>
        </button>
        <div class="progress-bar">
          <div class="progress-fill"></div>
        </div>
      </div>

      <!-- Main content -->
      <div class="content">
        <h1 class="title">
          <span>Achieve your goals with</span>
          <span class="highlight">Fluenty!</span>
        </h1>
        <p class="subtitle">Enter your email to learn your english level</p>

        <!-- Form section -->
        <div class="form-container">
          <div class="form-group">
            <label class="form-label">Email Address</label>
            <div style="position: relative; width: 100%">
              <input
                type="email"
                placeholder="user@mail.com"
                style="
                  width: 100%;
                  padding: 15px 15px 15px 50px;
                  font-size: 16px;
                  border: 1px solid #ddd;
                  border-radius: 16px;
                  box-sizing: border-box;
                  outline: none;
                "
              />
              <span style="position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: #888">
                <span class="material-icons" style="font-size: 24px">email</span>
              </span>
            </div>
          </div>

          <div class="checkbox-group">
            <input type="checkbox" id="newsletter" class="checkbox-input" />
            <label for="newsletter" class="checkbox-label">
              I agree to receive the latest fluenty news and updates via email.
            </label>
          </div>

          <div class="checkbox-group">
            <input type="checkbox" id="terms" class="checkbox-input" />
            <label for="terms" class="checkbox-label">
              I accept the fluenty
              <a
                href="https://res.turingsynergy.com/draft/Fluenty/Terms-and-Conditions.html"
                target="_blank"
                class="link"
                >Terms & Conditions</a
              >
              and
              <a href="https://res.turingsynergy.com/draft/Fluenty/Privacy-Policy.html" target="_blank" class="link"
                >Privacy Policy</a
              >
            </label>
          </div>
        </div>

        <!-- Stats box -->
        <div class="stats-box">
          <p class="join-text">Join over 10M+ people</p>

          <div class="awards-container">
            <div class="award1">
              <span class="laurel-left">
                <img src="./imgs/competition.svg" />
              </span>
              <div>
                <div class="rank">#1</div>
                <div class="rank-category">in Top Charts</div>
              </div>
              <span class="laurel-right">
                <img src="./imgs/competition2.svg" />
              </span>
            </div>

            <div class="stars">
              <img src="./imgs/5star.svg" class="star" />
            </div>

            <div class="award">
              <span class="laurel-left">
                <img src="./imgs/competition.svg" />
              </span>
              <div>
                <div class="rank-category">Education Category</div>
                <div class="rank">Most Downloaded App</div>
              </div>
              <span class="laurel-right">
                <img src="./imgs/competition2.svg" />
              </span>
            </div>
          </div>
        </div>

        <!-- Continue button -->
        <button id="continueBtn" class="continue-button" disabled>Continue</button>
      </div>
    </div>

    <script type="module" src="/src/achieveYour.ts"></script>
    <script>
      document.addEventListener('DOMContentLoaded', function () {
        const emailInput = document.querySelector('input[type="email"]')
        const continueBtn = document.getElementById('continueBtn')
        const newsletterCheckbox = document.getElementById('newsletter')
        const termsCheckbox = document.getElementById('terms')

        // 清空邮箱输入框和取消复选框勾选
        emailInput.value = ''
        newsletterCheckbox.checked = false
        termsCheckbox.checked = false
        continueBtn.disabled = true
        continueBtn.style.backgroundColor = '#a5cefb'

        // 验证所有条件并更新按钮状态
        function validateAndUpdateButton() {
          const isEmailValid = validateEmail(emailInput.value)
          const areCheckboxesChecked = newsletterCheckbox.checked && termsCheckbox.checked

          if (isEmailValid && areCheckboxesChecked) {
            continueBtn.disabled = false
            continueBtn.style.backgroundColor = '#4991ef'
          } else {
            continueBtn.disabled = true
            continueBtn.style.backgroundColor = '#a5cefb'
          }
        }

        // 邮箱验证函数
        function validateEmail(email) {
          const re =
            /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
          return re.test(String(email).toLowerCase())
        }

        // 监听邮箱输入变化
        emailInput.addEventListener('input', validateAndUpdateButton)

        // 监听复选框变化
        newsletterCheckbox.addEventListener('change', validateAndUpdateButton)
        termsCheckbox.addEventListener('change', validateAndUpdateButton)

        // 点击继续按钮
        continueBtn.addEventListener('click', function () {
          const email = emailInput.value
          if (validateEmail(email) && newsletterCheckbox.checked && termsCheckbox.checked) {
            // 存储邮箱，使用当前页面名作为key
            const pageName = window.location.pathname.split('/').pop().split('.')[0]
            localStorage.setItem(pageName, email)

            // 跳转到yourVocabulary.html页面
            window.location.href = 'yourVocabulary.html'
          }
        })
      })
    </script>
  </body>
</html>
